import BasicMapUtils from './BasicMapUtils'

const ol = window.ol

class All extends BasicMapUtils {
  initAll() {
    const center = [108.380748, 22.834541]
    const centerPoint = new ol.geom.Point(center)
    this.coordTransform.convertGeoIntoMap(centerPoint)
    const icon = require('assets/images/inoculate-yellow-icon.png')
    const markerLayer = this.createMarker({ x: centerPoint.getCoordinates()[0], y: centerPoint.getCoordinates()[1], icon })
    this.map.addLayer(markerLayer)
    let overlay = ''
    this.map.on('click', e => {
      const feature = this.map.forEachFeatureAtPixel(e.pixel, feature => {
        return feature
      })

      overlay && overlay.setPosition(undefined)
      if (feature) {
        if (feature.get('userData').type === 'marker') {
          overlay = this.createOverlay({
            htmlElement: document.querySelector('.case-dialog'),
            position: centerPoint.getCoordinates()
          })
          this.map.addOverlay(overlay)
        }
      }
    })

    const riverArr = [
      [108.304571, 22.806393],
      [108.311866, 22.81079],
      [108.318693, 22.816254],
      [108.324478, 22.816387],
      [108.328107, 22.812123],
      [108.329544, 22.804028]
    ]
    const riverLineString = new ol.geom.LineString(riverArr)
    this.coordTransform.convertGeoIntoMap(riverLineString)
    const lineLayer = this.createLine({ lineArr: riverLineString.getCoordinates() })
    this.map.addLayer(lineLayer)
  }
}

export default All
